<template>
  <div class="footer-panel">
    <div :class="{'footer-panel-item': true, 'selected-view': view === selectingView}"
         @click="() => selectView(view)" :title="view.viewName"
         v-for="view in views" v-context="[panelItemContext, view]">
      <div class="no-scroll"
           @dblclick="(e) => editName(view, e)"
           style="flex: 1; overflow: auto">
        {{ view.viewName }}
      </div>

    </div>
    <div class="add-button" @click="addNewView">
      +
    </div>

    <FModal ref="FModal" width="450" @ok="doCopy">
      <el-form ref="form" label-width="100px" :model="copyToData">
        <el-form-item prop="viewId" label="视图" :rules="[required]">
          <el-select v-model="copyToData.viewId" placeholder="请选择视图">
            <el-option :disabled="view.id === copyingView.id" v-for="view in views" :key="view.id"
                       :label="view.viewName" :value="view.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </FModal>
  </div>
</template>

<script>
import {Delete, InfoFilled} from '@element-plus/icons-vue';
import {DefaultViewDefinition} from '@/components/form/DefaultFormDefinition';
import {guid, required, resolveSort} from '@/utils/CommonUtils';
import {markRaw} from 'vue';
import {ElMessageBox} from 'element-plus';
import FModal from '@/components/FModal';

export default {
  name: "FormDesignFootPanel",
  components: {
    Delete,
    FModal
  },
  props: {
    viewActionHelper: {
      type: Object,
      default: () => {
        return {};
      },
    },
    views: {
      type: Array,
      default() {
        return [];
      },
    }
  },
  data() {
    return {
      required,
      copyToData: {
        viewId: undefined,
      },
      copyingView: {
        id: undefined,
      },
      panelItemContext: {
        width: 75,
        context: [
          {title: '新建', id: 'addNewView'},
          {title: '复制', id: 'copyView'},
          {title: '复制到', id: 'copyToView'},
          {title: '左移', id: 'moveLeftView'},
          {title: '右移', id: 'moveRightView'},
          {title: '删除', id: 'removeView'},
        ],
        click: this.onContext,
        close: () => null,
        button: 'right'
      },
      InfoFilled: markRaw(InfoFilled),
      editingView: undefined,
      selectingView: undefined,
    };
  },
  methods: {
    editName(view, e) {
      this.editingView = view;
      this.startEdit(e);
    },
    onContext(item, view) {
      this.panelItemContext.close();
      this[item.id](view);
    },
    copyView(view) {
      let view1 = JSON.parse(JSON.stringify(view));
      view1.id = guid();
      view1.main = '0';
      view1.viewName += '(副本)';
      view.viewKey = guid();
      this.views.push(view1);
      this.selectView(view1);
      this.viewActionHelper.refreshViews();
    },
    addNewView(originView) {
      let view = JSON.parse(JSON.stringify(DefaultViewDefinition));
      view.id = guid();
      view.viewKey = guid();
      this.views.push(view);
      this.selectView(view);
      this.viewActionHelper.refreshViews();
    },
    moveLeftView(view) {
      let index = this.views.findIndex(v => v === view);
      if (index !== -1) {
        index--;
        if (index >= 0) {
          let temp = this.views[index];
          this.views[index] = this.views[index + 1];
          this.views[index + 1] = temp;
        }
      }
      this.resolveSort();
    },
    moveRightView(view) {
      let index = this.views.findIndex(v => v === view);
      if (index !== -1) {
        index++;
        if (index < this.views.length) {
          let temp = this.views[index];
          this.views[index] = this.views[index - 1];
          this.views[index - 1] = temp;
        }
      }
      this.resolveSort();
    },
    resolveSort() {
      resolveSort(this.views);
    },
    copyToView(view) {
      this.copyingView = view;
      this.copyToData = {
        viewId: undefined,
      };
      this.$refs.FModal.open();
    },
    doCopy() {
      let view = this.views.find(v => v.id === this.copyToData.viewId);
      if (view) {
        view.viewDesignDefinition = this.copyingView.viewDesignDefinition;
      }
      this.$refs.FModal.close();
      this.viewActionHelper.refreshViews();
    },
    removeView(view) {
      if (view.main + '' === '1') {
        this.$message.warning('主视图不可删除!');
        return;
      }
      ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
        draggable: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let index = this.views.findIndex(v => v === view);
        if (index !== -1) {
          this.views.splice(index, 1);
        }
        this.viewActionHelper.refreshViews();
      }).catch(() => {
      });
    },
    setEditStyle(ele) {
      $(ele).attr('contentEditable', 'true');
      $(ele).css('cursor', 'text');
      $(ele).css('background', 'white');
      $(ele).css('color', 'rgb(102, 102, 102)');
    },
    selectView(view) {
      if (this.selectingView === view) {
        return;
      }
      this.selectingView = view;
      this.$emit('select', view);
    },
    selectMainView() {
      let index = this.views.findIndex(v => v.main + '' === '1');
      if (index !== -1) {
        this.selectView(this.views[index]);
      }
    },
    removeEditStyle(ele) {
      $(ele).attr('contentEditable', 'false');
      $(ele).css('cursor', '');
      $(ele).css('background', '');
      $(ele).css('color', '');
    },
    startEdit(e) {
      let ele = e.target;
      let originText = $(ele).text();

      this.setEditStyle(ele);
      $(ele).focus();
      $(ele).select();

      $(ele).off('blur').on('blur', () => {
        this.removeEditStyle(ele);

        let text = $(ele).text();
        if (!text || text === '') {
          $(ele).html(originText);
        }
        this.editingView.viewName = $(ele).text();
      });
    },
  }
};
</script>

<style scoped>

.footer-panel-item {
  width: 120px;
  max-width: 120px;
  border: 1px solid rgb(102, 102, 102);
  margin-left: -1px;
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  display: flex;

}

.delete-button * {
  display: none;
}

.footer-panel-item:hover .delete-button * {
  display: inherit;
}

.footer-panel {
  display: flex;
  z-index: 101;
}

.selected-view {
  background: rgb(89, 89, 89);
  border-top-color: rgb(89, 89, 89);
}

.footer-panel .add-button {
  user-select: none;
  cursor: pointer;
  width: 30px;
  border: 1px solid rgb(102, 102, 102);
  text-align: center;
  margin-left: -1px;
}

.no-scroll {
  outline: 0 solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-scroll:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
</style>
